<template>
	<div class='restaurant'>
		<!-- 面包屑 -->
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>信息管理</el-breadcrumb-item>
				<el-breadcrumb-item>餐厅基本信息管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="restaurant-a">
			<div class="restaurant-table">
				<table class="r-table font-family-1">
					<tbody>
					<tr>
						<td rowspan="4" align="center">
							<img :src="`http://localhost:8080/res/${rest.rest_img}`" height="160px"width="160px"/>
						</td>
						<td>餐厅名称：</td><td>{{rest.rest_name}}</td>
					</tr>
					<tr>
						<td>餐厅描述：</td><td>{{rest.rest_desc}}</td>
					</tr>
					<tr>
						<td>餐厅地址：</td><td>{{rest.rest_address}}</td>
					</tr>
					<tr>
						<td>餐厅电话：</td><td>{{rest.rest_tel}}</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="restaurant-button">
				<el-button type="primary" size="medium" @click="editRestaurant"><i class="el-icon-edit"></i>  编辑</el-button>
			</div>
			<div class="restaurant-dialog">
				<el-dialog
					title="编辑基本信息"
					:visible.sync="editDialogVisible"
					width="600px"
					top="15vh">
					<div class="restaurant-dialog-from"><!-- 中间内容 -->
						<el-form :model="rest" label-width="80px" size="small">
							<el-form-item label="餐厅名称" prop="rest_name">
								<el-input v-model="rest.rest_name"></el-input>
							</el-form-item>
							<el-form-item label="餐厅描述" prop="rest_desc">
								<el-input v-model="rest.rest_desc"></el-input>
							</el-form-item>
							<el-form-item label="餐厅地址" prop="rest_address">
								<el-input v-model="rest.rest_address"></el-input>
							</el-form-item>
							<el-form-item label="餐厅电话" prop="rest_tel">
								<el-input v-model="rest.rest_tel"></el-input>
							</el-form-item>
							<el-form-item label="餐厅图片">
								<el-upload ref="upload" action="" list-type="picture-card" :limit="1" :class="{hide:editHideUpload}" :on-change="editChangeImg"
								           :on-remove="editHandleRemove" :auto-upload="false" :file-list="editFileList" :multiple="false">
									<img :src="`http://localhost:8080/res/${rest.rest_img}`" height="146px" width="146px" style="opacity:0.5;"/>
								</el-upload>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editSubmit(rest)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import FoodService from "@/views/Food/FoodService";
	import RestaurantService from "@/views/Restaurant/RestaurantService";
  export default {
    name: "Restaurant",
	  data(){
      return{
				rest:{},
        editFileList:[],
        editDialogVisible:false,
        editHideUpload:false,
      }
	  },
	  methods:{
		  //编辑
      editRestaurant(){
        this.editDialogVisible=true;
      },
      editSubmit(editForm){
        this.editDialogVisible = false;
        this.editFileList = this.$refs.upload.uploadFiles;
        this.upload(this.editFileList,res=>{
          if(res!=''){
            editForm.rest_img=res;
          }
          RestaurantService.editRestaurantService(
            editForm
            ,r=>{
              if(r.updateState==1){
                this.$message({
                  type: 'success',
                  message: '提交成功!'
                });
              }else{
                this.$message({
                  type: 'error',
                  message: '提交失败!'
                });
              }
              this.searchRestaurant();
            })
        })
      },
      //图片改变回调
      editChangeImg(file,fileList){
        this.editHideUpload = fileList.length >= 1;
      },
      //图片删除回调
      editHandleRemove(file,fileList){
        this.editHideUpload = fileList.length >= 1;
      },
		  //搜索方法
      searchRestaurant(){
        RestaurantService.searchRestaurantService({

        },r=>{
					this.rest=r.restaurant;
        })
      },
      //上传图片
      upload(fileList,callback){
        let formData = new FormData();
        let result = fileList.map(obj => {
          return obj.raw
        });
        result.forEach(function(file) {
          formData.append('mpfs', file, file.name);
        })
        if(formData.has('mpfs')){
          FoodService.uploadService(formData, r => {
            //console.log(r.picName);
            callback(r.picName);
          });
        }else{
          callback('');
        }
      }
	  },
	  created(){
			this.searchRestaurant();
	  }
  }
</script>

<style scoped lang="less">

	@import '../../style/Common.less';
	.restaurant-a{
		padding: 20px;
	}

	.restaurant-table {
		background-color: #FFFFFF;
		border-radius: 5px;
		padding: 10px;
	}

	.restaurant-button{
		margin: 20px 20px 0 0;
		float: right;
	}

	.restaurant-dialog{
		.restaurant-dialog-from{
			padding: 0 20px;
		}
	}

	.r-table {
		width: 100%;
		border: 1px solid #ddd;
		border-collapse: collapse;
		border-spacing: 0;
	}

	.r-table th,
	td {
		border: 1px solid #ddd;
		padding: 8px;
		line-height: 20px;
	}

	.hide .el-upload--picture-card {
		display: none;
	}
</style>